<template>
  <view class="payment-container">
    <!-- 订单信息 -->
    <view class="order-info card">
      <view class="amount">
        <text class="label">支付金额</text>
        <text class="value">¥{{ order.amount }}</text>
      </view>
      <view class="detail">
        <view class="item">
          <text class="label">医院</text>
          <text class="value">{{ order.hospital }}</text>
        </view>
        <view class="item">
          <text class="label">科室</text>
          <text class="value">{{ order.department }}</text>
        </view>
        <view class="item">
          <text class="label">医生</text>
          <text class="value">{{ order.doctorName }} {{ order.doctorTitle }}</text>
        </view>
        <view class="item">
          <text class="label">就诊人</text>
          <text class="value">{{ order.patientName }}</text>
        </view>
        <view class="item">
          <text class="label">就诊时间</text>
          <text class="value">{{ order.date }} {{ order.time }}</text>
        </view>
        <view class="item">
          <text class="label">订单编号</text>
          <text class="value">{{ order.orderNo }}</text>
        </view>
      </view>
    </view>
    
    <!-- 支付方式 -->
    <view class="payment-methods card">
      <view class="section-title">选择支付方式</view>
      <view class="method-list">
        <view 
          class="method-item"
          v-for="(method, index) in paymentMethods"
          :key="index"
          :class="{ active: selectedMethod === method.value }"
          @tap="selectMethod(method.value)"
        >
          <view class="left">
            <image :src="method.icon" mode="aspectFit" class="icon" />
            <text class="name">{{ method.name }}</text>
          </view>
          <text class="iconfont icon-check"></text>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <view class="amount-info">
        <text class="label">实付金额：</text>
        <text class="amount">¥{{ order.amount }}</text>
      </view>
      <button 
        class="pay-btn primary-btn"
        @tap="confirmPay"
      >
        立即支付
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 订单信息
const order = ref({
  amount: 100,
  hospital: '澳门镜湖医院',
  department: '心内科',
  doctorName: '张医生',
  doctorTitle: '主任医师',
  patientName: '张三',
  date: '2024-03-21',
  time: '09:00',
  orderNo: 'AP202403210001'
})

// 支付方式
const paymentMethods = [
  {
    name: '微信支付',
    value: 'wechat',
    icon: '/static/payment/wechat.png'
  },
  {
    name: '支付宝',
    value: 'alipay',
    icon: '/static/payment/alipay.png'
  }
]

const selectedMethod = ref('wechat')

// 选择支付方式
const selectMethod = (method) => {
  selectedMethod.value = method
}

// 确认支付
const confirmPay = () => {
  uni.showLoading({
    title: '支付中...'
  })
  
  // 模拟支付过程
  setTimeout(() => {
    uni.hideLoading()
    uni.showModal({
      title: '支付成功',
      content: '您的预约已完成支付',
      showCancel: false,
      success: () => {
        uni.redirectTo({
          url: '/pages/appointment/record'
        })
      }
    })
  }, 1500)
}
</script>

<style lang="scss">
.payment-container {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx;
  padding-bottom: 120rpx;
  
  .order-info {
    margin-bottom: 20rpx;
    
    .amount {
      text-align: center;
      margin-bottom: 30rpx;
      
      .label {
        font-size: 28rpx;
        color: $text-regular;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .value {
        font-size: 48rpx;
        color: $danger;
        font-weight: bold;
      }
    }
    
    .detail {
      .item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          font-size: 26rpx;
          color: $text-regular;
        }
        
        .value {
          font-size: 26rpx;
          color: $text-primary;
        }
      }
    }
  }
  
  .payment-methods {
    .method-list {
      .method-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        &.active {
          .icon-check {
            color: $primary-color;
          }
        }
        
        .left {
          display: flex;
          align-items: center;
          
          .icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 20rpx;
          }
          
          .name {
            font-size: 28rpx;
            color: $text-primary;
          }
        }
        
        .icon-check {
          font-size: 40rpx;
          color: $text-secondary;
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    
    .amount-info {
      .label {
        font-size: 26rpx;
        color: $text-regular;
      }
      
      .amount {
        font-size: 36rpx;
        color: $danger;
        font-weight: bold;
      }
    }
    
    .pay-btn {
      width: 240rpx;
    }
  }
}
</style> 